<template>
	<view class="" v-if="!showVideo">
		<view v-if="myMsg" style="width: 100%;display: flex;padding: 20rpx;flex-direction: row-reverse;">
			<image :src="$store.state.user.user.avatar" style="width: 80rpx;height: 80rpx;border-radius: 8rpx;" mode="">
			</image>
			<view v-if="!playing" class="myvcss" :style="{'width':'350rpx','height':(350*height/width + 'rpx')}">
				<image :src="src + '.jpg'"
					style="filter: brightness(0.7);max-width: 350rpx;border-radius: 8rpx;width: 350rpx;"
					mode="widthFix"></image>
				<image @click="play" class="playbtn" :style="{top:(175*height/width + 40)*-1+'rpx'}" src="/static/images/icon_play.png" mode="">
				</image>
			</view>
			<view v-else class="myvcss" :style="{'width':'350rpx','height':(350*height/width + 'rpx')}">
				<video :controls="false" @ended="stop" :src="src" autoplay
					:style="{'width':'350rpx','height':(350*height/width + 'rpx')}" :poster="src + '.jpg'" ref="video"
					id="video"></video>
			</view>
		</view>
		<view v-else style="width: 100%;display: flex;padding: 20rpx;">
			<image :src="$store.state.fchat.friends[$store.state.fchat.currentFriendId].avatar" style="width: 80rpx;height: 80rpx;border-radius: 8rpx;" mode="">
			</image>
			<view v-if="!playing" class="myvcss"
				:style="{'width':'350rpx','height':(350*height/width + 'rpx'),'marginLeft':'15rpx'}">
				<image :src="src + '.jpg'" style="filter: brightness(0.7);max-width: 350rpx;border-radius: 8rpx;"
					mode="widthFix"></image>
				<image @click="play" src="/static/images/icon_play.png"
					:style="{top:(175*height/width + 40)*-1+'rpx'}" class="playbtn" mode="">
				</image>
			</view>
			<view v-else class="myvcss"
				:style="{'width':'350rpx','height':(350*height/width + 'rpx'),'marginLeft':'15rpx'}">
				<video :controls="true" @ended="stop" :src="src" autoplay
					:style="{'width':'350rpx','height':(350*height/width + 'rpx')}" :poster="src + '.jpg'" ref="video"
					id="video"></video>
			</view>
		</view>
		
		<!-- <view v-if="playing"
			style="position: fixed;top: 0rpx;left: 0rpx;width: 100%;height: calc(100vh - 110rpx);z-index: 9999;">
		
		</view> -->
	</view>
	<view v-else
		style="width: 100%;height: 100vh;position: fixed;top: 0rpx;left: 0rpx;z-index: 9999;background: #11111199;display: flex;align-items: center;flex-direction: column;justify-content: center;">
		<video :src="src" loop :poster="src + '.jpg'" ref="video" style="width: 100%;" id="video" autoplay></video>

		<view style="margin: 50rpx auto;">
			<u-icon size="80" @click="showVideo = false" name="close-circle" color="#fff"></u-icon>
		</view>
		
	<!-- 	<view v-if="playing"
			style="position: fixed;top: 0rpx;left: 0rpx;width: 100%;height: calc(100vh - 110rpx);z-index: 9999;">
		
		</view> -->
	</view>
</template>

<script>
	export default {
		name: "msgVideoItem",
		data() {
			return {
				showVideo: false,
				videoContext: '',
				playing: false,
				mheight: ''
			}
		},
		props: {
			src: {
				type: String,
				default: ""
			},
			width: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 0
			},
			myMsg: {
				type: Boolean,
				default: false
			}
		},
		mounted() {
			const _this = this
			this.videoContext = uni.createVideoContext("video", this)
		},

		methods: {
			stop: function() {
				this.playing = false
			},
			toJSON: () => {},
			play: function() {
				this.playing = true
				// this.showVideo = true
				// if (!this.videoContext) {
				// 	this.videoContext = uni.createVideoContext("video", this)
				// }

				// console.log(this.videoContext.play)
				// this.videoContext.play()
				// this.videoContext.requestFullScreen()
				// this.$refs.video.play()
				// const _this = this
				// setTimeout(() => {
				// 	_this.videoContext.play()
				// 	_this.videoContext.requestFullScreen()
				// 	_this.$refs.video.play()
				// }, 3000)

			}
		}
	}
</script>

<style scoped>
	.myvcss {
		margin-right: 15rpx;
		background: none;
		border-radius: 8rpx;
		max-width: 350rpx;
	}

	.playbtn {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		left: calc(50% - 40rpx);
	}
</style>